<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test05</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<script id="template01" type="text/x-template">
    <div style="background-color: yellow">
        <input :value="val" @input="$emit('update:val',$event.target.value)" v-on="inputListeners">
        <slot v-bind:stu="stu01">Default Slot01 {{stu01.name}}</slot>
        <button @click="incrementCounter">Click</button>
        <!--        <slot>Default Slot</slot>-->
        <slot v-bind:stu="stu02">Default Slot02 {{stu02.name}}</slot>
    </div>
</script>
<!--<template id="template01">-->
<!--    <div>-->
<!--        <input>-->
<!--        <button>Click</button>-->
<!--    </div>-->
<!--</template>-->

<div id="app">
    <!--    <text-btn v-model="message" @click.native="compClick"></text-btn>-->
    <!--    <text-btn @click="compClick" v-model="message"></text-btn>-->
    <!--        <text-btn :val="message" @inp="message = $event"></text-btn>-->
    <!--    <text-btn :val.sync="message"><template v-slot:slot01>abc</template></text-btn>-->
    <text-btn :val.sync="message">
        <!--        <template #[slot]>abc01</template>-->
        <!--        <template #slot02>abc02</template>-->
        <!--        <template v-slot:default="slotProps01">{{slotProps01.stu.age}}</template>-->
        <template v-slot="slotProps">{{slotProps.stu.age}}</template>
    </text-btn>
    <!--    <text-btn></text-btn>-->
    <!--    <text-btn></text-btn>-->
    <button @click="test">Test</button>
    {{message}}

</div>

<script>
    Vue.component('text-btn', {
        template: '#template01',
        model: {prop: 'val', event: 'inp'},
        props: ['val'],
        data: function () {
            return {
                counter: this.val,
                stu01: {
                    name: 'zhangsan',
                    age: 18
                },
                stu02: {
                    name: 'lisi',
                    age: 28
                },
            }
        },
        computed: {
            inputListeners: function () {
                // return this.$listeners;
                return Object.assign({}, this.$listeners, {})
            }
        },
        methods: {
            incrementCounter: function () {
                this.counter = this.val;
                this.counter++;
                this.$emit('update:val', this.counter);
            }
        }
    });

    let vm = new Vue({
        el: '#app',
        data: {
            message: 0,
            slot: 'slot01'
        },
        methods: {
            test: function () {
                this.message = 88;
            },
            compClick: function () {
                alert(888)
            }
        }
    });


</script>

</body>
</html>